<template>
  <!-- 下拉菜单 -->
  <div class="drop-down-menu">
    <section class="menu-section">
      <div class="menu-body">
        <div class="menu-list">
          <div
            class="menu-list-item"
            :class="index == 0 ? 'active' : ''"
            v-for="(item, index) in catList"
            :key="index"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="menu-icon" @click.stop="handleMenuIcon">
          <i
            class="iconfont"
            :class="showMenuInfo ? 'icon-weibiaoti-16' : 'icon-weibiaoti-17'"
          ></i>
        </div>
      </div>
    </section>
    <section class="menu-info-popup" v-show="showMenuInfo">
      <div class="menu-info-list">
        <div
          class="info-item"
          :class="index == 0 ? 'active' : ''"
          v-for="(item, index) in catList"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    catList:{
      type: Array,
      default: () => {
        return []
      },
    }
  },
  mixins: [],
  components: {},
  data() {
    return {
      menuList: [
        {
          text: "推荐分类",
          list: [
            {
              text: "二级推荐",
            },
            {
              text: "二级推荐",
            },
            {
              text: "二级推荐",
            },
          ],
        },
        {
          text: "精选超市",
          list: [
            {
              text: "二级推荐",
            },
            {
              text: "二级推荐",
            },
            {
              text: "二级推荐",
            },
          ],
        },
        {
          text: "家电",
          list: [
            {
              text: "二级推荐",
            },
            {
              text: "二级推荐",
            },
            {
              text: "二级推荐",
            },
          ],
        },
        {
          text: "大家电",
          list: [
            {
              text: "二级推荐",
            },
            {
              text: "二级推荐",
            },
            {
              text: "二级推荐",
            },
          ],
        },
      ],
      showMenuInfo: false,
      activeMenu: -1,
      activeMenuInfo: 0,
      currentMenu: [],
    };
  },
  mounted() {},
  watch: {},
  computed: {
    adConfig() {
      return this.propsData.params.abConfig || {};
    },
  },
  methods: {
    handleMenuIcon() {
      if(this.showMenuInfo) {
        this.$emit("closeMenuBg")
        this.showMenuInfo = false
      }else {
        this.$emit("showMenuBg")
        this.showMenuInfo = true
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.drop-down-menu {
  width: 100%;
  padding: 0 16px;
  min-height: 38px;
  background: #ffffff;
  position: relative;
  z-index: 20;
  top: -1px;
  .menu-section {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
  }
  .menu-body {
    width: 100%;
    display: flex;
    align-items: center;
    .menu-icon {
      width: 22px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        font-size: 12px;
      }
    }
    .menu-list {
      flex: 1;
      display: flex;
      align-items: center;
      overflow-x: scroll;
      overflow-y: hidden;
      .menu-list-item {
        height: 24px;
        background: #f5f6f7;
        border-radius: 60px;
        margin-right: 8px;
        padding: 0 8px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
        line-height: 24px;
        flex-shrink: 0;
      }
      .active {
        font-weight: 600;
        color: #f0250e;
        background-color: rgba(240, 37, 14, 0.05);
      }
    }
    .menu-list::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }

  .menu-info-popup {
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #f6f6f6;
    margin-top: 9px;
    .menu-info-list {
      padding: 9px 0;
      display: flex;
      flex-wrap: wrap;
      .info-item {
        height: 24px;
        background: #f5f6f7;
        border-radius: 60px;
        padding: 0 15px;
        line-height: 24px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
        margin: 0 8px 8px 0;
      }
      .active {
        font-weight: 600;
        color: #f0250e;
        background-color: rgba(240, 37, 14, 0.05);
      }
    }
  }
}
</style>
